<template>
  <div>
    <el-input disabled :value="$route.query.roleName"></el-input>
    <el-tree 
      style="margin: 20px 0"
      ref="tree"
      :data="allPermissions" 
      node-key="id"  
      show-checkbox 
      default-expand-all
      :props="{children: 'children', label: 'name'}" 
    />
    <el-button :loading="loading" type="primary" @click="save">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>
<script>

  export default {
    name: 'roleAuth',

    data() {
      return {
        loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
        allPermissions: [], // 所有
      };
    },

    created() {
      this.init()
    },

    methods: {
      /* 
      初始化
      */
      init() {
        // 根据角色id获取
        const roleId = this.$route.params.id
        this.getPermissions(roleId)
      },

      /* 
      获取指定角色的权限列表
      */
      getPermissions(roleId) {
        this.$API.permission.toAssign(roleId).then(result => {
          const allPermissions = result.data.children
          this.allPermissions = allPermissions
          const checkedIds = this.getCheckedIds(allPermissions)
          // console.log('getPermissions() checkedIds', checkedIds)
          this.$refs.tree.setCheckedKeys(checkedIds)
        })
      },

      /* 
      得到所有选中的id列表
      */
      getCheckedIds (auths, initArr = []) {
        return auths.reduce((pre, item) => {
          if (item.select && item.level===4) {
            pre.push(item.id)
          } else if (item.children) {
            this.getCheckedIds(item.children, initArr)
          }
          return pre
        }, initArr)
      },

      /* 
      保存权限列表
      */
      save() {
        // 得到所有全选和半选的权限id的数组
        // var ids = this.$refs.tree.getCheckedKeys().join(",")
        const checkedIds = this.$refs.tree.getCheckedKeys()
        const halfCheckedIds = this.$refs.tree.getHalfCheckedKeys()
        const ids = checkedIds.concat(halfCheckedIds).join(",")

        this.loading = true
        // 请求给角色分配多个权限
        this.$API.permission.doAssign(this.$route.params.id, ids).then(result => {
          this.loading = false
          this.$message.success('分配权限成功')
          /* 必须在跳转前获取(跳转后通过this获取不到正确的数据了) */
          // 得到角色名称
          const roleName = this.$route.query.roleName
          // 得到当前用户所属角色列表
          const roles = this.$store.getters.roles
          // 跳转回角色列表路由
          this.$router.replace('/acl/role/list', () => {
            // console.log('replace onComplete')
            // 跳转成功后, 判断如果更新的是当前用户对应角色的权限, 重新加载页面以获得最新的数据
            if (roles.includes(roleName)) {
              // window.location.reload()
            }
          })
        })
      },

      /* 
      取消
      */
      cancel () {
        this.$router.replace({name: 'Role'})
      }
    }
  };
</script>
